<template>
<div>
    <el-button type="text" @click="dialogVisible = true">甲端本地资费核实弹窗</el-button>
     <div class='container'>
      <el-dialog
        title="甲端本地资费核实"
        :visible.sync="dialogVisible"
        width="85%"
        lock-scroll
     >
     <div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px">
            <el-row>
                  <el-col :span="12">
                      <div class="grid-content">
                            <el-form-item label="节点名称" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                     <el-col :span="24">
                         <div class="u-title"><span class="icon"></span>资源调查信息</div>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="接入方式" prop="name">
                                <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="接入类别" prop="name">
                                <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                     </el-col>
                    
                     <el-col :span="6">
                          <el-form-item label="端口来源" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6">
                          <el-form-item label="局向" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6">
                          <el-form-item label="汇案点空余汇聚能力" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="是否雷租用第三方资源" prop="name">
                                <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                     </el-col>
                    
                      <el-col :span="6">
                          <el-form-item label="出租方" prop="name">
                               <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6">
                          <el-form-item label=" 租用段落/设备" prop="name">
                               <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="接入局上联中维资源" prop="name">
                               <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6">
                          <el-form-item label="预计工期(工作日)" prop="name">
                               <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="备注:" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>

                      <el-col :span="6">
                          <el-form-item label="接入局设备资源(含端口)" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="预计工期(工作日)" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="备注:" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>

                      <el-col :span="6">
                          <el-form-item label="外线资源" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="预计工期(工作日)" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="备注:" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>

                     <el-col :span="6">
                          <el-form-item label="客户端电信设备资源(含端口)" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="预计工期(工作日)" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="备注:" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>

                      <el-col :span="6">
                          <el-form-item label="设备厂商" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="设备型号" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="主控板软件版本:" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>


                      <el-col :span="6">
                          <el-form-item label="市政问题" prop="name">
                                <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="资源情况" prop="name">
                              <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="总计工期(工作日)" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6">
                          <el-form-item label="备注" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                       <el-col :span="6">
                          <el-form-item label="填报期限" prop="name">
                                <el-date-picker
                                v-model="ruleForm.data"
                                type="date"
                                placeholder="选择日期">
                              </el-date-picker>
                            </el-form-item>
                     </el-col>
                 
                     <el-col :span="6">
                          <el-form-item label="填报日期" prop="name">
                                <el-date-picker
                                v-model="ruleForm.data"
                                type="date"
                                placeholder="选择日期">
                              </el-date-picker>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6">
                          <el-form-item label="填报人" prop="name">
                                 <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="联系电话" prop="name">
                                 <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="代维费（月租费)" prop="name">
                                 <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                     </el-col>
                      <el-col :span="6" >
                          <el-form-item label="工料费" prop="name" required>
                                  <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                         </el-form-item>
                        
                     </el-col>
                       <el-col :span="12">
                          <el-form-item label="是否提供路由图" prop="name">
                                 <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                                 <el-button type="primary">上传电路图</el-button>
                           
                         </el-form-item>
                     </el-col>
                    
                      <el-col :span="6">
                         <el-form-item label="调剂费" prop="name" required>
                                  <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                         </el-form-item>
                      </el-col>
                        <el-col :span="6">
                         <el-form-item label="手续费" prop="name" required>
                                  <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                         </el-form-item>
                      </el-col>
                        <el-col :span="24" >
                          <fieldset class="contain-box">
                              <legend class="contain-title">光纤维护</legend>
                              <el-col :span="8">
                                  <el-form-item label="光纤接入工程费" prop="name" required>
                                      <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="光纤接入设备费" prop="name" required>
                                            <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                                  </el-form-item>
                              </el-col>
                            </fieldset>  
                        </el-col>
                         <el-col :span="6">
                            <el-form-item label="接入类型" prop="name" required>
                                <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="—次性费用一口价" prop="name">
                                     <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                         <el-col :span="6">
                            <el-form-item label="—次性费用币种" prop="name">
                                     <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="收费单位(一次性费用)" prop="name">
                                     <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="-次性委托收款单位" prop="name">
                                     <el-input @click.native="unitdialogVisible = true" v-model="value" readonly>
                                        <template slot="append"><i class="el-icon-more"></i></template>
                                      </el-input>
                                      <el-dialog
                                        title="-次性委托收款单位弹出"
                                        :visible.sync="unitdialogVisible"
                                        width="30%"
                                        append-to-body
                                      >
                                        <span>这是一段信息</span>
                                        <span slot="footer" class="dialog-footer">
                                          <el-button @click="unitdialogVisible = false">取 消</el-button>
                                          <el-button type="primary" @click="unitdialogVisible = false">确 定</el-button>
                                        </span>
                                      </el-dialog>
                            </el-form-item>
                         </el-col>
                         <el-col :span="6">
                            <el-form-item label="资费核实" prop="name" required>
                                  <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="核实期限" prop="name">
                                  <el-select v-model="value" placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="核实期限" prop="name">
                                  <el-date-picker
                                  v-model="ruleForm.date"
                                  type="date"
                                  placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="核实日期" prop="date">
                                  <el-date-picker
                                  v-model="ruleForm.date"
                                  type="date"
                                  placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                         </el-col>
                         <el-col :span="6">
                            <el-form-item label="核实人" prop="name">
                                  <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                         </el-col>
                          <el-col :span="6">
                            <el-form-item label="联系电话" prop="name">
                                  <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="24">
                            <el-form-item label="备注" prop="name">
                                  <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                         </el-col>
            </el-row>
           
        </el-form>

     </div>
    <span slot="footer" class="dialog-footer">
        <div class="text-c">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </div>
            
    </span>
</el-dialog>
  </div>
</div>

 
</template>

<script>

  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 这里存放数据
    data () {
      return {
          dialogVisible:false,
          unitdialogVisible:false,
          ruleForm:{
              name:"",
              date:""
          },
            options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
.text-c{
    text-align:center;
}
u-title {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.u-title .icon {
  float: left;
  display: block;
  width: 4px;
  height: 12px;
  background: #f56f3c;
  margin-top: 2px;
  margin-right: 10px;
  font-size: 14px;
}
 .contain-box{
  border: 1px solid #f56f3c;
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.contain-title{
  margin-left:0.4rem;
  padding:0 0.1rem;
}

</style>